<template>
  <div style="background-color: yellow">
    <h2>component 动态组件</h2>
    <h4>vue内置组件，专门用来实现组件的动态渲染</h4>
    <button @click="show1">axios全局配置-组件</button>
    <button @click="show2">ref属性-组件</button>
    <h3>--------------必须是组件，而不是控件--------------------</h3>
    <!-- <component> 是组件的占位符，通过 is 属性动态指定要渲染的组件名称 -->
    <!-- comName 就是导入组件时的名称 -->
    <!-- keep-alive 用法： 用 keep-alive 标签包裹要保持状态的内容 -->
    <keep-alive>
      <div class="box">
        <component :is="comName"></component>
      </div>
    </keep-alive>
  </div>
</template>

<script>
import AxiosDemo from "./05-axios.vue";
import RefDemo from "./06-ref.vue";

export default {
  name: "componentDemo",
  components: {
    AxiosDemo,
    RefDemo,
  },
  data() {
    return {
      comName: "AxiosDemo",
    };
  },
  methods: {
    show1() {
      this.comName = "AxiosDemo";
    },
    show2() {
      this.comName = "RefDemo";
    },
  },
};
</script>
<style scoped>
.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  background-color: aquamarine;
  border: 1px solid rebeccapurple;
}
</style>
